
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hi-dialect</title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
</head>

<body>

    <!-- Page loading -->
    <div class="loading">
        <div class="spinner-grow"></div>
    </div>
    <!-- * Page loading -->
    <!-- App Header -->
    <div class="appHeader">
        <div class="left">
            <a href="javascript:;" class="icon goBack">
                <i class="icon ion-ios-arrow-back"></i>
            </a>
        </div>
        <div class="pageTitle">关注</div>
        <div class="right">
            <label for="searchInput" class="mb-0 icon toggleSearchbox">
                <i class="icon ion-ios-search"></i>
            </label>
        </div>
    </div>
    <!-- searchBox -->
    <div class="searchBox">
        <form>
            <span class="inputIcon">
                <i class="icon ion-ios-search"></i>
            </span>
            <input type="text" class="form-control" id="searchInput" placeholder="请输入...">
            <a href="javascript:;" class="toggleSearchbox closeButton">
                <i class="icon ion-ios-close-circle"></i>
            </a>
        </form>
    </div>
    <!-- * searchBox -->
    <!-- * App Header -->
    <!-- App Capsule -->
    <div id="appCapsule">

        <div class="appContent">


            <!-- listview -->
            <div class="listView detailed">
                <a href="#" class="listItem">
                    <div class="image">
                        <img src="img/sample/avatar.jpg" alt="avatar">
                    </div>
                    <div class="text">
                        <div>
                            <strong>胖大海</strong>
                            <div class="text-muted">
                                <i class="icon ion-ios-pin mr-1"></i>
                                上海市
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="listItem">
                    <div class="image">
                        <img src="img/sample/avatar2.jpg" alt="avatar">
                    </div>
                    <div class="text">
                        <div>
                            <strong>金银花</strong>
                            <div class="text-muted">
                                <i class="icon ion-ios-pin mr-1"></i>
                                陕西省西安市
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="listItem">
                    <div class="image">
                        <img src="img/sample/avatar3.jpg" alt="avatar">
                    </div>
                    <div class="text">
                        <div>
                            <strong>单杠</strong>
                            <div class="text-muted">
                                <i class="icon ion-ios-pin mr-1"></i>
                                浙江省温州市
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="listItem">
                    <div class="image">
                        <img src="img/sample/avatar4.jpg" alt="avatar">
                    </div>
                    <div class="text">
                        <div>
                            <strong>爱新觉罗.马路牙子</strong>
                            <div class="text-muted">
                                <i class="icon ion-ios-pin mr-1"></i>
                                北京市朝阳区
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="listItem">
                    <div class="image">
                        <img src="img/sample/avatar5.jpg" alt="avatar">
                    </div>
                    <div class="text">
                        <div>
                            <strong>看那小子</strong>
                            <div class="text-muted">
                                <i class="icon ion-ios-pin mr-1"></i>
                                四川省泸州市
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="listItem">
                    <div class="image">
                        <img src="img/sample/avatar6.jpg" alt="avatar">
                    </div>
                    <div class="text">
                        <div>
                            <strong>不如跳舞</strong>
                            <div class="text-muted">
                                <i class="icon ion-ios-pin mr-1"></i>
                                浙江省杭州市
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="listItem">
                    <div class="image">
                        <img src="img/sample/avatar7.jpg" alt="avatar">
                    </div>
                    <div class="text">
                        <div>
                            <strong>精准而优雅</strong>
                            <div class="text-muted">
                                <i class="icon ion-ios-pin mr-1"></i>
                                江苏省南京市
                            </div>
                        </div>
                    </div>
                </a>
                <a href="#" class="listItem">
                    <div class="image">
                        <img src="img/sample/avatar8.jpg" alt="avatar">
                    </div>
                    <div class="text">
                        <div>
                            <strong>张铁柱</strong>
                            <div class="text-muted">
                                <i class="icon ion-ios-pin mr-1"></i>
                                安徽省滁州市
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <!-- * listview -->
            

        </div>

    </div>
    <!-- appCapsule -->
    <!-- App Bottom Menu -->
    <div class="appBottomMenu">
        <div class="item">
            <a href="homepage.html">
                <p>
                    <i class="icon ion-ios-water"></i>
                    <span>首页</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="activitiy-main.html">
                <p>
                    <i class="icon ion-ios-apps"></i>
                    <span>活动</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="materials-tools.html">
                <p>
                    <i class="icon ion-ios-add-circle"></i>
                    <span>工具</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="social-home.html">
                <p>
                    <i class="icon ion-ios-aperture"></i>
                    <span>动态</span>
                </p>
            </a>
        </div>
        <div class="item">
            <a href="people-info.html">
                <p>
                    <i class="icon ion-ios-person"></i>
                    <span>我的</span>
                </p>
            </a>
        </div>
    </div>
    <!-- * App Bottom Menu -->
    <!-- Sidebar Menu -->
    <div class="sidebarWrapper">
        <div class="overlay toggleSidebar"></div>
        <nav class="sidebar">
            <div class="profilebox">
                <img src="img/sample/avatar.jpg" alt="avatar" class="avatar">
                <h2 class="title">Gaspar Antunes</h2>
                <h5 class="lead">
                    <i class="icon ion-ios-pin mr-1"></i>
                    Chicago
                </h5>
                <div class="button">
                    <a href="#">
                        <i class="icon ion-ios-settings"></i>
                    </a>
                </div>
            </div>
            <div class="sidebarGroup">
                <ul class="sidebarMenu">
                    <li>
                        <a href="social-home.html">
                            <i class="icon ion-ios-people"></i>
                            Social
                        </a>
                    </li>
                    <li>
                        <a href="social-chat.html">
                            <i class="icon ion-ios-chatboxes"></i>
                            Chat
                        </a>
                    </li>
                    <li>
                        <a href="pages.html">
                            <i class="icon ion-ios-apps"></i>
                            Pages
                        </a>
                    </li>
                    <li>
                        <a href="components.html">
                            <i class="icon ion-ios-analytics"></i>
                            Components
                        </a>
                    </li>
                    <li>
                        <a href="blog-home.html">
                            <i class="icon ion-ios-book"></i>
                            Magazine - Blog
                        </a>
                    </li>
                    <li>
                        <a href="page-login.html">
                            <i class="icon ion-ios-lock"></i>
                            Login
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sidebarGroup">
                <ul class="sidebarMenu">
                    <li class="title">Online</li>
                    <li>
                        <a href="#">
                            <img src="img/sample/avatar2.jpg" alt="avatar" class="avatar">
                            Guiying K.
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/sample/avatar3.jpg" alt="avatar" class="avatar">
                            Kita Chihoko
                            <span class="badge badge-primary">2</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/sample/avatar4.jpg" alt="avatar" class="avatar">
                            Leonetta Lloyd
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/sample/avatar5.jpg" alt="avatar" class="avatar">
                            Lizzie Rose
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="img/sample/avatar6.jpg" alt="avatar" class="avatar">
                            Kari Granleese
                        </a>
                    </li>
                </ul>
            </div>

        </nav>
    </div>
    <!-- * Sidebar Menu -->
   <!-- ///////////// Js Files ////////////////////  -->
   <!-- Jquery -->
   <script src="js/lib/jquery-3.4.1.min.js"></script>
   <!-- Bootstrap-->
   <script src="js/lib/popper.min.js"></script>
   <script src="js/lib/bootstrap.min.js"></script>
   <!-- Owl Carousel -->
   <script src="js/plugins/owl.carousel.min.js"></script>
   <!-- Main Js File -->
   <script src="js/app.js"></script>

</body>

</html>